<template>
  <div class="customer-service theme-dark">
    <!-- 悬浮客服图标 -->
    <div
      class="service-icon"
      v-show="!isShowChat && !noBtn"
      @click="handleServiceClick"
      :class="{ bounce: showBounceAnimation }"
    >
      <div class="badge-wrapper" v-if="unreadCount > 0">
        <div class="icon-wrapper">
          <a-icon class="icon-service"></a-icon>
          <span class="service-text">{{ t('serviceText') }}</span>
        </div>
        <span class="badge">{{ unreadCount }}</span>
      </div>
      <div v-else class="icon-wrapper">
        <a-icon class="icon-service"></a-icon>
        <span class="service-text">{{ t('serviceText') }}</span>
      </div>
    </div>

    <!-- 聊天窗口 -->
    <transition name="slide-fade" v-if="isShowChat">
      <div class="chat-popup">
        <div class="chat-header">
          <div class="header-content">
            <div class="avatar-name">
              <img class="avatar" :src="serviceAvatar" alt="客服头像" />
              <span>{{ t('serviceText') }}</span>
            </div>
          </div>
          <div class="header-right">
            <!-- <div class="language-switcher">
              <select
                :value="currentLang"
                class="lang-select"
                @change="switchLanguage($event.target.value)"
              >
                <option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
                  {{ lang.name }}
                </option>
              </select>
            </div> -->
            <a-icon class="icon-minus" @click="minimizeChat"></a-icon>
            <a-icon class="icon-cross" @click="hideChat"></a-icon>
          </div>
        </div>
        <!-- 聊天内容区域 -->
        <div
          :scroll-top="scrollTop"
          class="chat-body chat-scroll"
          ref="chatBody"
          :scroll-y="true"
          :scroll-into-div="historyFirstMessageID"
        >
          <!-- <div class="prediv-text" v-if="messages.length === 0">
              {{ t('predivText') }}
            </div> -->
          <div class="message-list">
            <!-- <div name="fade-message" class="fade-message"> -->
            <div
              v-for="message in messages"
              :key="'msg' + message.id"
              :class="['message-item', message.isSelf ? 'self' : 'other']"
            >
              <div class="message-content">
                <div class="message-bubble" :class="{ typing: message.isTyping }">
                  <template v-if="message.isTyping">
                    <div class="typing-indicator"><text></text><text></text><text></text></div>
                  </template>
                  <template v-else>
                    <template v-if="message.type === 'img'">
                      <div class="image-message">
                        <img :src="message.content" @click="predivImage(message.content)" />
                      </div>
                    </template>
                    <template v-else>
                      {{ message.content }}
                    </template>
                  </template>
                </div>
                <span class="message-time" v-if="message.time">
                  {{ formatTime(message.time) }}
                </span>
              </div>
            </div>
            <div id="lastMsg" style="height: 10px"></div>
            <!-- </div> -->
          </div>
        </div>

        <div class="chat-footer" ref="editor">
          <div class="input-wrapper">
            <div class="toolbar">
              <UploadImage @change="handleImageUpload" />
            </div>
            <div class="input-area">
              <textarea
                v-model="messageText"
                :placeholder="t('inputMessage')"
                class="message-input"
                rows="1"
                @keypress.enter.prevent="sendMessage"
                :adjust-position="false"
                @focus="focusHandler"
              ></textarea>
            </div>
            <div
              class="send-btn"
              :class="{ active: messageText }"
              @click="sendMessage"
              :style="{ transform: messageText ? 'scale(1)' : 'scale(0.9)' }"
            >
              <a-icon class="icon-send"></a-icon>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getSupport, fetchServiceMsgList } from '@/api/service'
import customerWebsocket from './customer-websocket'
import { messages as localeMessages } from './locales'
import UploadImage from './UploadImage.vue'
const availableLanguages = [
  { code: 'en', name: 'English', label: 'En' },
  { code: 'ja', name: '日本語', label: '日' }
]
// const defaultLang = 'en'
export default {
  name: 'CustomerService',
  components: {
    UploadImage,
  },
  props: {
    // defaultLang: {
    //   type: String,
    //   default: 'en',
    //   validator: (value) => ['en', 'ja'].includes(value)
    // },
    token: {
      type: String,
      default: ''
    },
    userId: {
      type: [String, Number],
      default: ''
    },
    noBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      scrollHeight: 0,
      keyboardHeight: 0,
      scrollTop: 0,
      pageHeight: 0,
      historyFirstMessageID: '',
      wsClient: null,
      currentLang: 'en',
      availableLanguages,
      isShowChat: false,
      unreadCount: 0,
      messageText: '',
      chatBody: null,
      showBounceAnimation: false,
      serviceAvatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
      // 用户名相关状态
      userName: '',
      userNameInput: '',
      nameError: '',
      messages: [],
      // 添加文件输入引用
      fileInput: null,
      currentServiceId: null,
      // WebSocket 相关
      ws: null,
      isConnected: false,
      reconnectTimeout: null,
      bounceTimer: null,
      messageListHeight: 'auto',
      defaultLang: 'zh'
    }
  },
  beforeUnmount() {
    if (this.ws) {
      this.ws.close()
    }
    if (this.reconnectTimeout) {
      clearTimeout(this.reconnectTimeout)
    }
    if (this.bounceTimer) {
      clearInterval(this.bounceTimer)
    }
  },
  watch: {
    token(newValue) {
      this.defaultLang = localStorage.getItem('fx-lang') || 'zh'
      this.currentLang = this.defaultLang
      if (newValue && this.ws) {
        this.ws.close()
      }
      if ((newValue && this.userName) || this.userName) {
        this.connectWebSocket()
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.historyFirstMessageID = 'msg-' + this.messages.length
    })
    this.startBounceAnimation()
  },
  methods: {
    t(key) {
      const translation = localeMessages[localStorage.getItem('fx-lang') || 'en']
      return translation[key] || key
    },
    switchLanguage(lang) {
      this.currentLang = lang
      // 更新欢迎消息
      if (this.messages.length > 0) {
        this.messages[0].content = this.t('welcomeMessage', { name: this.userName })
      }
    },
    // 建立 WebSocket 连接
    connectWebSocket() {
      const vm = this
      if (this.messages.length > 0 && this.isConnected) return
      customerWebsocket.init({
        headers: {},
        token: vm.token,
        success: function () {
          vm.isConnected = true
          const checkConnection = setInterval(function () {
            clearInterval(checkConnection)
            fetchServiceMsgList({ userId: vm.currentServiceId }).then((resp) => {
              vm.messages = resp.data.records.map((e) => {
                e.isSelf = e.fromUser == vm.userId
                return e
              })
              vm.$nextTick(function () {
                vm.historyFirstMessageID = 'msg-' + vm.messages.length
              })
              if (vm.messages.length <= 0) {
                vm.messages = [
                  {
                    id: 1,
                    type: 'text',
                    content: vm.t('welcomeMessage').replace('{name}', ''),
                    isSelf: false,
                    time: new Date()
                  }
                ]
              } else {
                vm.scrollToBottom(9999)
              }
            })
            const timerId = setInterval(() => {
              try {
                customerWebsocket.sendMessage(
                  `{"source":"chat","type":"PING","toUser":"${vm.userId}","fromUser":${vm.userId},"content":"2"}`
                )
              } catch (e) {
                clearInterval(timerId)
              }
            }, 10000)
          }, 100)
        },
        onClose() {
          console.log('socket close', 'dsfsf')
          vm.isConnected = false
          customerWebsocket.disconnect()
        }
      })
      customerWebsocket.newSubscribe('components', 'customer', function (data) {
        if (data.source === 'chat' && data.type !== 'PING') {
          vm.handleChatMessage(data)
        }
      })
    },
    // 处理接收到的聊天消息
    handleChatMessage(data) {
      this.messages.push({
        id: Date.now(),
        type: data.type,
        content: data.content,
        isSelf: data.fromUser === this.userId,
        time: new Date(),
        fromUser: data.fromUser,
        toUserId: data.toUserId
      })
      if (!this.isShowChat) {
        this.unreadCount++
      }

      this.scrollToBottom()
    },
    // 发送消息到 WebSocket
    sendWebSocketMessage(type, content) {
      // if (!isConnected.value) {
      //   // alert('连接已断开，请稍后重试')
      //   return false
      // }

      try {
        const message = {
          source: 'chat',
          type: type,
          toUser: this.currentServiceId,
          fromUser: this.userId,
          content: content
        }
        customerWebsocket.sendMessage(JSON.stringify(message))
        return true
      } catch (error) {
        console.error('Failed to send message:', error)
        return false
      }
    },
    focusHandler() {
      const vm = this
      setTimeout(() => {
        vm.scrollTop *= vm.keyboardHeight
      }, 200)
    },
    scrollToBottom() {
      setTimeout(() => {
        let chatBody = this.$refs.chatBody
        if (chatBody) {
          chatBody.scrollTop = chatBody.scrollHeight
        }
      }, 0)
    },
    startBounceAnimation() {
      const vm = this
      this.bounceTimer = setInterval(() => {
        vm.showBounceAnimation = true
        setTimeout(() => {
          vm.showBounceAnimation = false
        }, 1000)
      }, 5000)
    },
    handleServiceClick() {
      const vm = this
      this.isShowChat = true
      this.unreadCount = 0
      this.submitUserName()
      if (this.bounceTimer) {
        clearInterval(this.bounceTimer)
      }
      setTimeout(() => {
        vm.scrollToBottom()
      }, 500)
    },
    hideChat() {
      this.isShowChat = false
      customerWebsocket.closeSocket()
    },
    minimizeChat() {
      this.isShowChat = false
      this.startBounceAnimation()
    },
    handleImageUpload(file) {
      let imgMsg = {
        source: 'chat',
        id: Date.now(),
        type: 'img',
        content: file,
        isSelf: true,
        time: new Date()
      }
      this.messages.push(imgMsg)
      this.sendWebSocketMessage('img', file)
      this.scrollToBottom()
    },
    sendMessage() {
      const self = this
      if (!this.messageText.trim()) return
      if (this.sendWebSocketMessage('text', this.messageText)) {
        this.messages.push({
          id: Date.now(),
          type: 'text',
          content: self.messageText,
          isSelf: true,
          time: new Date()
        })
        self.messageText = ''
        self.scrollToBottom()
      }
    },
    submitUserName() {
      getSupport().then((res) => {
        this.currentServiceId = res.data
        // 用户名验证通过后，建立 WebSocket 连接
        this.connectWebSocket()
      })
      this.nameError = ''
      this.userName = this.userNameInput.trim()
    },
    formatTime(time) {
      const date = new Date(time)
      return `${date.getHours().toString().padStart(2, '0')}:${date
        .getMinutes()
        .toString()
        .padStart(2, '0')}`
    }
  }
}
</script>

<style scoped lang="scss">
.customer-service {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 999;
}

.service-icon {
  padding: 8px 16px;
  background: #0066ff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.service-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
}

.badge-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.badge {
  position: absolute;
  top: -8px;
  right: -12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  text-align: center;
  background-color: #ff4d4f;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #fff;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-service {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>')
    no-repeat center;
  background-size: contain;
}

.icon-arrow-left,
.icon-minus,
.icon-cross,
.icon-send {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-arrow-left {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
}

.icon-minus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23333"><path d="M19 13H5v-2h14v2z"/></svg>');
}

.icon-cross {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23333"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}

.icon-send {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23fff"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>');
}

.service-text {
  color: #fff;
  font-size: 14px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.message-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 8px;
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  min-height: 24px;
  max-height: 80px;
  color: #333;
}

/* 聊天窗口动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/* 消息动画 */
.fade-message-enter-active,
.fade-message-leave-active {
  transition: all 0.3s ease;
}

.fade-message-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-message-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.chat-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  height: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  /* border-bottom: 1px solid #f0f0f0; */
  justify-content: space-between;
  width: 100%;
}

.header-left {
  width: 32px;
}

.header-content {
  text-align: center;
}

.avatar-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.avatar-name span {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #52c41a;
  margin-left: 8px;
}

.status-dot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  opacity: 0.5;
  animation: pulse 2s infinite;
}

.status-dot.offline {
  background-color: #ff4d4f;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.header-right {
  display: flex;
  gap: 16px;
}

.header-right .van-icon {
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-right .van-icon:hover {
  color: #0066ff;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #f8f9fa;
  transition: height 0.3s ease;
}

.prediv-text {
  text-align: center;
  color: #999;
  padding: 20px;
  font-size: 14px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-item {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 80%;
  animation: slideIn 0.3s ease;
  margin-bottom: 8px;
  &:last-of-type {
    margin-bottom: none;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-item.self {
  flex-direction: row-reverse;
  margin-left: auto;
}

.message-content {
  position: relative;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  max-width: 100%;
  word-break: break-word;
  transition: all 0.3s ease;
}

.message-item.self .message-bubble {
  background-color: #0066ff;
  color: white;
  border-bottom-right-radius: 4px;
}

.message-item.other .message-bubble {
  background-color: white;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  display: block;
}

.chat-footer {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 8px;
  // height: 129px;
}

.input-wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: flex-end;
  background: #f8f9fa;
  border-radius: 24px;
  padding: 8px 12px;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}

.input-area {
  flex: 1;
}

.send-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-btn.active {
  background: #0066ff;
  color: white;
  transform: scale(1) rotate(0deg) !important;
}

.send-btn.active:hover {
  transform: scale(1.1) rotate(0deg) !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}

.icon-send {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23666"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
}

.send-btn.active .icon-send {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23ffffff"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>');
}

.message-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 8px;
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  min-height: 24px;
  max-height: 80px;
}

.toolbar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 100%;
}

.file-input {
  display: none;
}

.icon-image {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" divBox="0 0 24 24" fill="%23666"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.icon-image:hover {
  opacity: 1;
}

.image-message {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.image-message img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-message img:hover {
  transform: scale(1.02);
}

.image-prediv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.prediv-overlay {
  max-width: 90vw;
  max-height: 90vh;
}

.prediv-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.powered-by {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.powered-by:hover {
  opacity: 1;
}

@media screen and (max-width: 480px) {
  .chat-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .service-icon {
    padding: 6px 12px;
  }
}

/* 用户信息表单样式 */
.user-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
}

.form-content {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.form-content h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 12px;
}

.form-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}

.form-item {
  margin-bottom: 16px;
}

.name-input {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.name-input:focus {
  outline: none;
  border-color: #0066ff;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}

.error-message {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 8px;
  text-align: left;
  padding-left: 16px;
}

.submit-btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: #e0e0e0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn.active {
  background: #0066ff;
}

.submit-btn.active:hover {
  background: #0052cc;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}

.language-switcher {
  margin-right: 12px;
  position: relative;
}

.lang-select {
  appearance: none;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 24px 4px 8px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" divBox="0 0 24 24" fill="%23666"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.lang-select:hover {
  border-color: #0066ff;
  color: #0066ff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" divBox="0 0 24 24" fill="%230066ff"><path d="M7 10l5 5 5-5z"/></svg>');
}

.lang-select:focus {
  outline: none;
  border-color: #0066ff;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}

/* 移除旧的按钮样式 */
.lang-btn {
  display: none;
}
</style>
